<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"></script>
        <title>开发页面</title>
    </head>
    <body>
        <div id="container" style="height: 800px"></div>

        <script type="text/javascript" >
            let myChart = echarts.init(document.getElementById("container"));
            let option = {
                title: {
                    text: '得分趋势'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: {{ legend }}
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: {{ xAxis }}
                },
                yAxis: [{
                    type: 'value'
                }],
                series: {{ series }}
            };
            option["tooltip"]["formatter"] = function (params) {
                let scores = [];
                for(let i=0,l=params.length;i<l;i++){
                    let data = option.series[params[i].seriesIndex]
                    scores.push({
                        score: data.data[params[i].dataIndex],
                        name: params[i].seriesName,
                        color: params[i].color
                    });
                }
                let sorted = scores.sort(function (x, y){
                    if (x.score < y.score) {
                        return 1;
                    } else if (x.score > y.score) {
                        return -1;
                    } else {
                        return 0;
                    }
                });
                let res = "排行榜</br>"
                for(let i=0,l=sorted.length;i<l;i++){
                    let score = sorted[i].score;
                    var color = sorted[i].color;
                    var name = sorted[i].name;
                    res += '<span style=" font-size:22px;color:'+ color +';">'+' ● '+'</span>' + name +':'+score+'</br>'; 
                }
                return res;
            }
            myChart.setOption(option); 
        </script>
    </body>
</html>

